<template>
  <view
    class="video_box"
    :style="{ '--color': vuex_config.themeColor1 }"
    v-if="dataForm.pk_id ? true : false"
  >
    <!-- <image class="video_img" :src="$formatImg(dataForm.img)"  @click="previewImage($formatImg(dataForm.img))" mode=""></image> -->
    <sww-swipe indicatorDots autoplay preview :list="swipeList" />
    <view class="video-title-price">
      <view class="video-title u-line-1">{{ dataForm.name }}</view>
      <view class="price-box">
        <view class="video-price" style="margin-right: 15rpx"
          >￥{{ dataForm.price }}</view
        >
        <block
          v-if="
            vuex_user.type == 2 &&
            dataForm.rebate > 0 &&
            vuex_user.commission > 0
          "
        >
          <text class="u-font-25 sww-tp u-m-r-5">分享赚</text>
          <text class="u-font-20 sww-tp">￥</text>
          <text class="u-font-25 sww-tp">{{
            $rebateNum(dataForm.rebate, vuex_user.commission)
          }}</text>
        </block>
      </view>
    </view>
    <!-- 视频详情 -->
    <view class="video_details">
      <view class="video-d-i u-flex">
        <view class="v-d-name">热度</view>
        <view class="v-time">{{ dataForm.video_view }}</view>
      </view>
      <view class="video-d-i u-flex" v-if="dataForm.type_name">
        <view class="v-d-name">所属分类</view>
        <view class="v-time">{{ dataForm.type_name }}</view>
      </view>
      <view class="video-d-i u-flex">
        <view class="v-d-name">上传时间</view>
        <view class="v-time">{{ dataForm.date_creation }}</view>
      </view>
    </view>

    <!-- 视频目录 -->
    <view class="v-catalog-content">
      <view class="v-catalog" @click="onChange">
        <view class="v-d-name">视频目录</view>
        <view class="icon_live iconfont iconfont-e772"></view>
      </view>
      <view v-if="vDetails" class="v-catalog-box">
        <view
          class="v-catalog-item"
          v-for="(item, index) in dataForm.video_list"
          :key="index"
        >
          <view class="video-d-i u-flex" @click="onLinVideoTo(item.url)">
            <view class="v-d-name">{{ item.name }}</view>
            <!-- <view class="v-time">→</view> -->
            <u-icon
              name="lock-fill"
              class="icon_stop"
              v-if="dataForm.order_count < 1"
            ></u-icon>
            <view class="icon_live iconfont iconfont-e65c" v-else></view>
          </view>
        </view>
      </view>
      <view class="video-list">视频详情</view>
    </view>
    <u-parse :html="dataForm.details"></u-parse>
    <view class="bottom-box u-flex" v-if="dataForm.pk_id">
      <view
        :class="[
          'bottom-box-item-left',
          'flex-c-c',
          dataForm.order_count > 0 ? 'has_play' : '',
        ]"
        @click="
          ontryIt(!dataForm.video_list[0] ? '' : dataForm.video_list[0].url)
        "
      >
        <view class="cart_icon iconfont iconfont-e65c"></view>
        <text>{{ dataForm.order_count < 1 ? "视频试播" : "立即播放" }}</text>
      </view>
      <view
        v-if="dataForm.order_count < 1"
        class="bottom-box-item-right flex-c-c"
        @click="onBuy()"
      >
        <u-icon name="shopping-cart" class="bottom-img"></u-icon>
        <text>立即购买</text>
      </view>
    </view>
    <view class="bottom-line"></view>
    <sww-login></sww-login>
    <sww-pay-class ref="payCheck" @callBack="onPayPrice"></sww-pay-class>
    <u-popup v-model="showImg" mode="center">
      <image class="show-img" :src="dataForm.adv_pic" mode="aspectFill"></image>
    </u-popup>
  </view>
</template>
<script>
import { uniModal, uniLinkTo, uniToast, uniHide } from "@/utils/uniPromise.js";
import { payOrder } from "@/mixins/payOrder.js";
import { wxConfig } from "@/mixins/wxConfig";
import { formatDate } from "@/utils/moment/index.js";
import { pageShare } from "@/mixins/pageShare";
export default {
  mixins: [payOrder, pageShare, wxConfig],
  data() {
    return {
      vDetails: false,
      dataForm: {
        video_list: [],
      },
      id: "",
      init: false,
      browTime: 0,
      showImg: false,
      swipeList: [],
    };
  },

  onLoad(options) {
    // #ifdef H5
    this.initWxConfig(["chooseWXPay"])
      .then(() => {})
      .catch(() => {});
    // #endif
    let { id } = options;
    this.id = id;
    if (id) {
      this.initPage(id);
      this.getBrowTime();
    }
  },
  onShow() {
    if (this.init) {
      uniHide();
      this.initPage(this.id);
    } else {
      this.init = true;
    }
  },
  onUnload() {
    if (this.browTime && this.$isLogin()) {
      this.addBrow(this.dataForm.pk_id);
    }
  },
  onShareAppMessage: function () {
    return this.getShareAppMessage();
  },
  onShareTimeline: function () {
    return this.getShareTimeline();
  },
  methods: {
    // 记录开始浏览时间
    getBrowTime() {
      this.browTime = new Date().getTime();
    },
    // 新增浏览记录
    addBrow(prodId) {
      let date = new Date();
      let duration = parseInt((date.getTime() - this.browTime) / 1000);
      date = formatDate(date, "YYYY-MM-DD HH:mm:ss");
      this.$resPost("AddUsersBrowse", {
        type: 5,
        product_id: prodId,
        date_time: date,
        duration: duration,
      }).catch(() => {});
    },
    checkLogin() {
      return this.$login("initPage", this.dataForm.pk_id);
    },
    initPage(pk_id) {
      this.$loading();
      this.$resPost("GetVideoInfo", {
        pk_id,
      })
        .then((res) => {
          if (!res.data.pk_id || res.data.status != 1) {
            return Promise.reject();
          }
          if (res.data.gobal_buyer && res.data.gobal_buyer != "0") {
            let bol = true;
            if (!this.vuex_user.level || this.vuex_user.level == "0") {
              bol = false;
            } else {
              let arr = res.data.gobal_buyer.split(",");
              bol = arr.some((item) => {
                return item == this.vuex_user.level;
              });
            }
            if (!bol) {
              this.$hide();
              uni.showModal({
                content: "当前产品您没有查看权限",
                showCancel: false,
                confirmText: "我知道了",
                success: () => {
                  this.uniBack();
                },
              });
              return;
            }
          }
          if (res.data.img) {
            this.swipeList = res.data.img.split(",").map((el) => {
              return {
                img: el,
              };
            });
          }
          this.dataForm = {
            ...res.data,
          };

          this.customShareParams(); // 设置当前产品页的分享参数
          this.$hide();
        })
        .catch(() => {
          this.$hide();
          uniModal({
            title: "商品已下架",
            showCancel: false,
            confirmText: "我知道了",
          }).then(() => {
            this.uniBack();
          });
        });
    },
    // [这个函数名称不能变--pageShare.js]设置当前产品页的分享参数
    customShareParams() {
      if (!this.shareParams.title) {
        let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
        let curRoute = routes[routes.length - 1].route; //获取当前页面路由
        let curParam = routes[routes.length - 1].options; //获取路由参数
        let obj = this.swipeList.find((item) => {
          return item.img;
        });
        this.shareParams = {
          title: this.dataForm.name,
          path: curRoute,
          query: curParam,
          imgUrl: obj && obj.img ? obj.img : "",
        };
        this.onShareByH5().then(() => {});
      }
    },
    //打开选择支付方式
    onBuy() {
      this.checkLogin().then(() => {
        if (this.dataForm.order_count > 0) {
          return this.$toast("视频已购买");
        }
        this.$refs.payCheck.open(this.dataForm.price);
      });
    },

    // 商品支付
    onPayPrice(e) {
      let pay_type = e.pay_type;
      let dataForm = this.dataForm;
      let json = JSON.stringify([
        {
          // 商品信息
          fk_pro_id: dataForm.pk_id, //所属产品ID
          price: dataForm.price, //单价
          num: 1, //购买数量
          remark: dataForm.remark, //备注
        },
      ]);
      let params = {
        // business_account_id: this.vuex_business.appid, //商家appId
        business_appid: this.vuex_business.appid, //商家appId
        postage: 0, //邮费
        coupon_id: 0, //优惠卷
        name: this.vuex_user.name, //用户姓名
        mobile: this.vuex_user.mobile, //用户手机
        total_amount: dataForm.price, //总金额
        remark: "", //备注
        json_detailed: json,
      };
      this._submitOrder(params, {
        pay_type,
        order_type: 5,
        router: "",
        orderApi: "AddOrderVideo",
        redirectUrl: this.dataForm.adv_pic ? "" : "/package/order/list/index",
        totalPrice: dataForm.price, //总金额
        modal: false, //不显示混入组件里面的支付提示模态框
      });
    },
    //支付成功的回调
    onOrderUptateSuccess() {
      if (this.dataForm.adv_pic) {
        this.showImg = true;
        this.initPage();
      }
    },
    /**
     * 获取微信支付信息
     * @returns {object}
     */
    wxOrderPay(params) {
      return new Promise((resolve, reject) => {
        this.$resPost("GetCreateOrderPay", {
          ...params,
        })
          .then((res) => {
            // console.log('GetCreateOrderPay', res)
            if (res.data) {
              resolve(res.data);
              return;
            }
            return Promise.reject();
          })
          .catch((err) => {
            console.log("获取微信支付信息失败");
          });
      });
    },

    // 视频目录切换开关
    onChange() {
      this.vDetails = !this.vDetails;
    },
    // 立即播放
    // startPlay() {
    // 	let arr = this.dataForm.video_list || [];
    // 	let obj = arr[0] || {};
    // 	let url = obj.url || '';
    // 	this.onLinVideoTo(url);
    // },
    // 点击观看目录视频
    onLinVideoTo(url) {
      if (!url) {
        this.$toast("未上传视频");
        return;
      }
      if (this.dataForm.order_count < 1) {
        //为0的时候是未购买
        this.$toast("视频未购买");
        return;
      }
      uniLinkTo(`/package/video/video-play/index?url=${url}`);
    },

    // 试看
    ontryIt(url) {
      if (!url) {
        this.$toast("未上传视频");
        return;
      }
      let params = {
        url, //视频地址
        duration: this.dataForm.try_time, //试播时间秒为单位 1 = 1秒
      };

      uniLinkTo(
        `/package/video/video-play/index?url=${params.url}&duration=${params.duration}`
      );
    },
  },
};
</script>

<style lang="scss">
.video_img {
  width: 100%;
  height: 438rpx;
}
.show-img {
  width: 500rpx;
  height: 500rpx;
}
.video-title-price {
  width: 100%;
  height: 190rpx;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #ffffff;
  border-bottom: 20rpx solid #f5f5f5;
}

.video-title {
  font-size: 36rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
}

.price-box {
  display: flex;
  align-items: center;
}

.video-price {
  font-size: 36rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #f82424;
}

.icon_stop {
  width: 34rpx;
  height: 34rpx;
  display: flex;
  font-size: 40rpx;
  align-items: center;
  justify-content: center;
  color: #999;
}

.icon_live {
  font-size: 38rpx;
  color: var(--color);
}

.video_details {
  padding: 0 20rpx;
}

.video-d-i {
  justify-content: space-between;
  height: 97rpx;
  line-height: 97rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  border-bottom: 1rpx solid #f5f5f5;
}

.v-time {
  font-weight: 500;
  color: #999999;
}

.v-catalog {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20rpx;
  height: 98rpx;
  background: #f7fcff;
}

.v-d-name {
  font-size: 28rpx;
  font-family: PingFang;
  font-weight: 500;
  color: #333333;
}

.video-list {
  position: relative;
  font-size: 36rpx;
  font-family: PingFang;
  font-weight: bold;
  color: #333333;
  margin: 20rpx 0 30rpx 0;
  padding: 0 40rpx;
  margin-bottom: 30rpx;
}

.video-list::before {
  content: "";
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  border-radius: 4rpx;
  height: 36rpx;
  background-color: #1aa3f6;
}

.v-catalog-item {
  padding: 0 20rpx;
}

.v-catalog-box {
  border-bottom: 20rpx solid #f5f5f5;
}

.v-catalog-content {
  transition: opacity 0.5s;
}

.bottom-box {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  width: 100%;
  height: 98rpx;
  background: #ffffff;
  border-top: 1rpx solid #f5f5f5;
  box-sizing: border-box;

  .flex-c-c {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bottom-box-item-left {
    flex: 1;
    color: #1aa3f6;
    height: 100%;

    &.has_play {
      background-color: #1aa3f6;
      color: #fff;
    }
  }

  .bottom-box-item-right {
    flex: 1;
    background-color: var(--color);
    color: #fff;
    height: 100%;
  }

  .cart_icon {
    width: 40rpx;
    height: 30rpx;
    margin-right: 10rpx;
    font-size: 40rpx;
  }

  .bottom-img {
    color: #fff;
    margin-right: 10rpx;
    font-size: 40rpx;
  }
}

.bottom-line {
  width: 100%;
  height: 100rpx;
}
</style>
